/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component } from 'react';
import { Form, Input, DatePicker, Select, message, Button, Tooltip, Icon, Alert, Descriptions } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import request from '@/utils/request';
import find from 'lodash/find';

const FormItem = Form.Item;
const Option = Select.Option;
let uuid = 1;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      meterDetail:{
        last_online_time:''
      },
      meterArr: z
    };
  }

  clearTable = () => {
    uuid = 10;
    this.setState({
      meterArr: [1],
      meterActiveKey: ['1'],
      meter1: [],
    });
    this.props.form.resetFields();
  };

  componentDidMount() {
    const that = this;
    this.fetchMeter()
  }
  fetchMeter = () => {
    const that = this;
    console.log('this.props.meter_number',this.props.meter_number)
    request(`/meters/${escape(this.props.meter_number)}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          meterDetail:response.data.data
        })
      }


    });
  };
  addMeter = () => {
    uuid++;
    this.state.meterArr.push(uuid);
    this.state.meterActiveKey.push(uuid.toString());
    this.setState({
      [`meter${uuid}`]: [],
      meterArr: this.state.meterArr,
      meterActiveKey: this.state.meterActiveKey,
    });
  };
  deleteMeter = (item) => {
    console.log('删除的item', item);
    if (this.state.meterArr.length === 1) {
      console.log('只有一个水表');
      // message.error('至少需要一个水表')
      // return false
    }
    const index = this.state.meterArr.indexOf(item);
    console.log('index', index);
    this.state.meterArr.splice(index, 1);
    this.setState({
      meterArr: this.state.meterArr,
    });
  };

  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
    };
    const that=this;
    const { getFieldDecorator } = this.props.form;
    const meterForms = this.state.meterArr.map((item, index) => {
      return (
        <Form style={{ display: 'flex' }} className={'custom-table-form'} key={index} layout="inline">
         {/* <div style={{ width: '50px', lineHeight: '29px', textAlign: 'center', border: '1px solid #d9d9d9' }}>
            {index + 1}
          </div>*/}
          <FormItem
            style={{ flex: '1', marginRight: '0' }}

          >
            {getFieldDecorator(`meter_date-${item}`, {
              initialValue: moment(),
            })(
              <DatePicker disabledDate={(currentDate) => currentDate && currentDate > moment().endOf('day')}
                          allowClear={false} style={{ width: '325px' }}/>,
            )}
          </FormItem>
          <FormItem
            style={{ flex: '1', marginRight: '0' }}

          >
            {getFieldDecorator(`meter_value-${item}`, {
              initialValue: '',
            })(
              <Input style={{ width: '325px', fontWeight: 'bold' }}
                     onPressEnter={(e) => {
                       if(e.target.value){
                         this.props.handleAddOneMechanical()
                         setTimeout(function(){
                           that.fetchMeter()
                         },1000)
                       }else{
                         message.error('请输入本期读数')
                       }
                     }}  allowClear={true}
                     autoFocus={Boolean(index===0)}/>,
            )}
          </FormItem>
         {/* <div style={{ width: '80px', lineHeight: '29px', textAlign: 'center', border: '1px solid #d9d9d9' }}>
            <div
              style={{ padding: '0 4px',color:'#fff',cursor:'pointer',background:'#dc0000' }}
              onClick={(e) => {
                e.stopPropagation();
                this.deleteMeter(item);
              }
              }
            >删除
            </div>
          </div>*/}


        </Form>
      );
    });
    return (
      <div>
        <Descriptions bordered>


          <Descriptions.Item label="水表号" span={2}> <Tooltip
            title={this.props.editRecord.number}>{this.props.editRecord.number}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="安装地址" span={2}><Tooltip
            title={this.props.editRecord.address}>{this.state.meterDetail.address}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="上期抄表时间" span={2}><Tooltip
            title={this.props.editRecord.last_online_time.slice(0,10)}>{this.state.meterDetail.last_online_time.slice(0,10)}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="上期读数" span={2}><Tooltip
            title={this.props.editRecord.latest_value}>{this.state.meterDetail.latest_value}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="水表底数"  span={2}><span style={{color:this.state.meterDetail.initial_value?'red':''}}>{this.state.meterDetail.initial_value}</span></Descriptions.Item>
        </Descriptions>
        <div style={{ border: '1px solid #d9d9d9', marginTop: '10px' }}>

          <div style={{
            display: 'flex',
            fontWeight: 'bold',
            lineHeight: '32px',
            height: '32px',
            background: 'rgb(249,249,249)',
          }}>
            {/*<div style={{ width: '50px', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>序号</div>*/}
            <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>本期抄表时间</div>
            <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>本期读数(m³)</div>
            {/*<div style={{ width: '80px', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>操作</div>*/}
          </div>
          {meterForms}
          {/*<Button type={'primary'} className={'btn-cyan'} icon={'plus'} block onClick={this.addMeter}>添加行</Button>*/}

        </div>
        {/*<Button type={'danger'} style={{ marginTop: '12px' }} icon={'table'} onClick={this.clearTable}>初始化表格</Button>*/}
      </div>

    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


